let arr = []
const tbody = document.querySelector('tbody')
const send = document.querySelector('button')
const textarea = document.querySelector('textarea')
const h3 = document.querySelector('.receive-area h3')
let cjTime = 1
const cj = document.querySelector('.cj')
send.addEventListener('click', () => {
  const tr = document.createElement('tr')
  const uname = localStorage.getItem('uname')
  const data = new Date()
  if (uname === null) {//先用！==完成后改为===
    alert('请先登录,登陆成功后才可以评论!')
    location.href = 'denglu.html'//地址为注册页面
  } else {
    if (cjTime === 1) {
      cj.style.opacity = 1
      cjTime++;
    } else {
      cj.style.opacity = 0
    }
    const esobj = {
      uname: uname,
      context: `${textarea.value}`,
      Time: `${data.toLocaleString()}`
    }
    arr.push(esobj)
    set()
    textarea.value = ''
  }
})
tbody.addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    arr.splice(e.target.dataset.id, 1)
    set()
  }
})
function set() {
  tbody.innerHTML = ''
  for (let i = 0; i < arr.length; i++) {
    const tr = document.createElement('tr')
    tr.innerHTML = `
      <td><img src="${src}" alt=""></td>
      <td><ul>
      <li class="plName">${arr[i].uname}</li>
      <li class="plContent">${arr[i].context}</li>
      <li class="plTime">${arr[i].Time}</li>
    </ul>
      </td>
      <td><a href = 'javascript:' data-id=${i} class='delete'>删除</a></td>
    `
    tbody.appendChild(tr)
  }
  h3.innerHTML = `全部评论(${arr.length})`
}
const fix = document.querySelector('.send-area')
const nav1 = document.querySelector('.nav')
const main = document.querySelector('main')
window.addEventListener('scroll', () => {
  if (document.documentElement.scrollTop >= nav1.offsetHeight) {
    fix.classList.add('fix')
  }
})
window.addEventListener('scroll', () => {
  if (document.documentElement.scrollTop >= main.offsetHeight) {
    fix.classList.remove('fix')
  }
})
const arrImg = ['images/index-clothes1.jpg', 'images/shopping-勇者1.jpg', 'images/shopping-勇者3.jpg', 'images/index-clothes2.jpg', 'images/shopping-勇者2.jpg', 'images/index-clothes3.jpg', 'images/index-clothes4.jpg', 'images/shopping-xianshi1.jpg']
const imgRandom = document.querySelector('.random-img')
const pRandom = document.querySelector('.random-p')
const bRandom = document.querySelector('.box1')
const Irandom = document.querySelector('.box1 img')
const k = document.querySelector('.k')
const j = document.querySelector('.j')
imgRandom.addEventListener('click', function () {
  imgRandom.style.opacity = 0
  pRandom.style.opacity = 0
  bRandom.style.display = 'block'
})
let n = 0
k.addEventListener('click', function () {
  k.style.display = 'none'
  j.innerHTML = '结束'
  n = setInterval(function () {
    i = Math.floor(Math.random() * (arrImg.length))
    Irandom.src = arrImg[i]
  }, 10)
})
j.addEventListener('click', function () {
  clearInterval(n)
  setTimeout(function () {
    bRandom.style.display = 'none'
  }, 3000)
})
let src = ""
const ajaxImg = document.querySelector('.send-area img')
const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.oioweb.cn/api/picture/miyoushe_avatar')
xhr.send()
xhr.addEventListener('readystatechange', function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    let arrimg = JSON.parse(xhr.responseText).result[4].list
    src = JSON.parse(xhr.responseText).result[4].list[Math.floor(Math.random() * arrimg.length)].icon
    ajaxImg.src = src
  }
})